<template>
  <div class="page">
    <scroll-view
      class="scroll"
      scroll-y="true"
      @refresherrefresh="refreshAction"
      @scrolltolower="toLowerAction"
      refresher-enabled="true"
    >
      <div class="section pitch_default">
        <div class="p_default row">
          <u-swiper height="200" :list="images" @change="change" @click="click"></u-swiper>
        </div>

        <div class="row px_default">
          <div class="card radius_sm p_default express-card">
            <div class="justify_between align-items_center mb_md">
              <div>
                <div class="h4" @tap="handleGetCode">查看取件码</div>
                <div style="color: #a8a9ae">快递取件码</div>
              </div>

              <div>
                <u-button
                  type="primary"
                  shape="circle"
                  text="查看"
                  :plain="true"
                  size="small"
                  @tap="toMiniProgramAction"
                ></u-button>
              </div>
            </div>

            <div
              class="radius_sm p_xs min-card justify_center align-items_center"
            >
              <image
                src="/static/phone.png"
                class="icon-phone"
                mode="widthFix"
              />跳转合作的快递小程序
              <u-icon name="arrow-right" class="mx_xs"></u-icon>
              <image
                src="/static/find.png"
                class="icon-find"
                mode="widthFix"
              />查看快递取件码
            </div>
          </div>
        </div>

        <div class="grid box-border column_2 p_xs">
          <div
            class="grid-item box-border p_xs"
            v-for="item in dataList"
            :key="item.id"
          >
            <Good
              @tap="navigate(`/pages/detail/detail?id=${item.id}`)"
              :good="item"
            ></Good>
          </div>
        </div>
      </div>
      <div class="scroll-footer"></div>
    </scroll-view>
  </div>
</template>

<script>
import PrivacyPopup from '@/components/privacy-popup/privacy-popup.vue';
import api from '@/api/api.js';

import { navigate } from '@/service/navigate';
import { getGoodList } from '@/api/good.api';
import { pageMixin } from '../../mixins/index';
import Good from '../../components/good/good.vue';

export default {
  mixins: [pageMixin(getGoodList)],
  components: {
    PrivacyPopup,
    Good,
  },
  data() {
    return {
      link: {},
      images: [
        'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
        'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
      ],
    };
  },
  onShow() {
    if (uni.getStorageSync('deliveryStation')) {
      this.link = uni.getStorageSync('deliveryStation');
    }
    // #ifdef MP-WEIXIN
    // 在设置 showPrivacyPopup = true 后使用 $nextTick
    console.log('wx.getPrivacySetting', wx.getPrivacySetting);
    if (wx.getPrivacySetting) {
      wx.getPrivacySetting({
        success: res => {
          console.log('打印', res);
          if (res.needAuthorization) {
            this.showPrivacyPopup = true;
            this.$nextTick(() => {
              if (this.$refs.privacyComponent) {
                this.$refs.privacyComponent.showPrivacy = true;
              }
            });
          }
        },
      });
    }

    // #endif
  },
  methods: {
    navigate,
    handleGetCode() {
      if (!(this.link && this.link.wserviceType)) {
        uni.showToast({
          title: '未知驿站',
          icon: 'none',
        });
        return;
      }
      switch (this.link.wserviceType) {
        case 1:
          // 内部小程序链接
          this.goPage(this.link.wserviceUrl);
          break;
        case 2:
          // 外部小程序链接
          if (typeof wx !== 'undefined') {
            wx.navigateToMiniProgram({
              appId: this.link.wserviceAppid,
              path: this.link.wserviceUrl,
              extraData: {
                data1: 'test',
              },
            });
          } else if (typeof my !== 'undefined') {
            my.navigateToMiniProgram({
              appId: this.link.wserviceAppid,
              path: this.link.wserviceUrl,
              extraData: {
                data1: 'test',
              },
            });
          } else if (typeof tt !== 'undefined') {
            tt.navigateToMiniProgram({
              appId: this.link.wserviceAppid,
              path: this.link.wserviceUrl,
              extraData: {
                data1: 'test',
              },
            });
          }
          break;
        case 3:
          // 外部网页链接
          this.goPage('/pages/webview/webview?url=' + this.link.wservice_url);
          break;
        default:
          console.error('未知的链接类型');
      }
      return;
    },
    handleSubmit() {
      uni.showToast({
        title: '取件成功',
        icon: 'none',
      });
      return;
      let params = {};
      api.func(params).then(res => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .banner-img {
    width: 100%;
    height: 120px;
    border-radius: 4px;
  }

  .bottom-img {
    width: 100%;
    height: 80px;
    margin-top: 40px;
  }
}

.main-btn {
  background-color: #d4b077;
  margin: 15px 0;
}

.input-box {
  margin: 15px 0;
  width: 200px;
  height: 100px;
  border: 1px solid #ededed;
  padding: 16px;
  font-size: 20px;

  input {
    margin-top: 15px;
    font-size: 16px;
  }
}

.scroll {
  height: 100%;
}

.swiper {
  height: 200px;
}

.scroll-footer {
  height: 50px;
}

.express-card {
  background-color: #fff;
  background-image: url('@/static/pack.png');
  background-size: 80px 80px;
  background-repeat: no-repeat;
  background-position: center;

  .min-card {
    background: rgba(#f1f1f1, 0.7);
    font-size: 12px;
  }
}

.icon-phone {
  width: 20px;
}

.icon-find {
  width: 24px;
}
</style>
